<template>
  <view class="login">
    <image src="/src/static/images/login-bg.png" />

    <view class="content">
      <view class="login-title">{{appName}}登录<image src="/src/static/images/dlyq.png" /></view>
      <view class="gro">
        <input placeholder="请输入手机号" v-model="mobile" />
      </view>
      <view class="gro">
        <input placeholder="请输入验证码" style="width: 60%" v-model="verify" />
        <text class="getcode" @click="getCode">获取验证码</text>
      </view>

      <view class="clickdl" @click="clickLogin"> 登录 </view>

      <view class="agent">
        <view @click="isAgree = !isAgree">
          <image :src="isAgree ? '/src/static/images/xz2.png' : '/src/static/images/xz1.png'" />
        </view>
        <view class="xy_con">
          <text class="xieyi">我已阅读并同意</text>
          <text>用户协议</text>
          <text class="xieyi">与</text>
          <text>隐私政策</text>
          <text class="xieyi">并授权{{appName}}</text>
        </view>
      </view>
    </view>
  </view>

  <u-popup :show="show" mode="center" class="xytk">
    <view class="tankuang">
      <view class="tle">用户协议和隐私政策</view>
      <view class="text">
        为了更好的保护您的合法权益，请您阅读并同意以下权益
        <text>用户协议，</text>
        <text>隐私政策</text>, 未注册的手机号将自动完成手机注册。
      </view>
      <view class="sub">
        <view class="sub_a" @click="show = false">取消</view>
        <view class="sub_b" @click="clickConfirm">确定</view>
      </view>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
  import { ref, unref } from 'vue';
  import { getCodeApi } from '@/api/login';
  import { onShow } from '@dcloudio/uni-app';
  import { useUserStore } from '@/store/modules/user';

  const userStore = useUserStore();
  const show = ref(false);
  const mobile = ref('');
  const verify = ref('');
  const isAgree = ref(false);
  const appName = ref('');

  function getCode() {
    const data = { mobile: mobile.value };
    getCodeApi(data).then(() => {
      uni.showToast({
        title: '发送成功',
        icon: 'none',
      });
    });
  }

  function clickLogin() {
    if (!unref(isAgree)) {
      show.value = true;
    } else {
      const data = { mobile: mobile.value, verify: verify.value };

      userStore.login(data);
    }
  }

  function clickConfirm() {
    isAgree.value = true;
    show.value = false;
    clickLogin();

  }


  // function navigateTo(url) {
  //   uni.navigateTo({
  //     url,
  //   });
  // }

  onShow(() => {
    console.log(userStore.getToken);
    if (userStore.getToken) {
      uni.switchTab({
        url: '/',
      });
    }

    console.log('show')
    console.log(userStore.config)
    appName.value = userStore.getConfig.site_name
  });


</script>

<style lang="less">
  .login {
    height: 100%;

    > uni-image {
      width: 100%;
      height: 100%;
    }

    .content {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      text-align: center;
      padding: 0 51px;
      box-sizing: border-box;

      .login-title {
        font-size: 23px;
        color: #000;
        margin: 110px 0 30px;
        font-weight: 800;

        uni-image {
          width: 9px;
          height: 9px;
          margin: -25px 5px 0;
        }
      }

      .gro {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 27px 0 10px;
        border-bottom: 1px solid #ccc;

        uni-input {
          width: 100%;
          font-size: 14px;
        }

        .getcode {
          font-size: 14px;
          color: #323232;
        }
      }

      .clickdl {
        margin-top: 91px;
        height: 41px;
        text-align: center;
        line-height: 41px;
        background: linear-gradient(270deg, #ff8361, #ff5525);
        color: #fff;
        border-radius: 41px;
      }

      .agent {
        display: flex;
        margin-top: 40px;

        uni-image {
          width: 16px;
          height: 16px;
        }

        .xy_con {
          margin-left: 10px;

          uni-text {
            font-size: 12px;
            color: #ff5e30;
          }

          .xieyi {
            color: #999;
          }
        }
      }
    }
  }

  .xytk {
    :deep(.u-popup__content) {
      margin: 0 12%;
      padding: 0 20px 10px;
      border-radius: 6px;
    }

    .tankuang {
      .tle {
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        padding: 15px 0;
      }

      .text {
        color: #bbb;
        font-size: 13px;
        margin-bottom: 15px;
        text-align: center;
        line-height: 20px;

        uni-text {
          color: #323232;
          font-size: 14px;
        }
      }

      .sub {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .sub_a,
        .sub_b {
          width: 48%;
          height: 35px;
          text-align: center;
          line-height: 35px;
          font-size: 14px;
          border-radius: 3px;
        }

        .sub_a {
          background: #f4f5f7;
        }

        .sub_b {
          background: #ff5e30;
          color: #fff;
        }
      }
    }
  }
</style>
